<template>
  <el-main>
    <el-carousel height="50px" :loop="true" :interval="3000" direction="vertical" :autoplay="true">
      <el-carousel-item v-for="o in noticeList" :key="o.noticeTitle">
        <span style="font-weight: bold">{{ o.noticeTitle }}：</span>
        <span style="color: red">{{ o.noticeContent }}</span>
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in cards" :key="item.title">
        <el-card class="box-card">
          <div slot="header" class="clearfix">{{ item.title }}</div>
          <div style="text-align: center;font-size: 30px;font-weight: 700;vertical-align: super;">
            <el-image class="icon" :src="item.icon"></el-image>
            <div style="padding-right: 10px;">{{ item.data }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="display: flex">
      <div id="main1" style="width: 400px; height: 300px; flex-grow: 1"></div>
      <div id="main2" style="width: 400px; height: 300px; flex-grow: 1"></div>
    </div>
    <div style="margin-top: 50px; display: flex">
      <div id="main3" style="width: 400px; height: 300px;flex-grow: 1"></div>
      <div id="main4" style="width: 400px; height: 300px;flex-grow: 1"></div>
    </div>
    <!--    <el-card class="box-card" style="margin-top:30px;">-->
    <!--      <div slot="header">-->
    <!--        <span style="color:#000000;font-weight:600;">公告列表</span>-->
    <!--      </div>-->
    <!--      <div v-for="o in noticeList" :key="o" class="text item">-->
    <!--        <span style="font-weight: bold">{{ o.noticeTitle }}：</span>-->
    <!--        <span style="color: red">{{ o.noticeContent }}</span>-->
    <!--        <el-divider></el-divider>-->
    <!--      </div>-->
    <!--    </el-card>-->
  </el-main>
</template>
<script>
import {
  getAllTagCountApi,
  getHotBookApi,
  categoryCountApi,
  getTopListApi,
  getBookByWeekApi,
  getBookByMonthApi
} from '@/api/dashBoard'
import { getUserType, getUserId } from '@/utils/auth'

export default {
  name: 'Dashboard',
  data () {
    return {
      cards: [
        { title: '读者总数', data: '', icon: 'http://localhost:8080/images/reader.png' },
        { title: '读者待审核', data: '', icon: 'http://localhost:8080/images/readerWait.png' },
        { title: '借书待审核', data: '', icon: 'http://localhost:8080/images/borrowBook.png' },
        { title: '到期待还书', data: '', icon: 'http://localhost:8080/images/returnBook.png' }
      ],
      noticeList: [],
    }
  },
  mounted () {
    this.myecharts1()
    this.myecharts2()
    this.myecharts3()
    this.myecharts4()
    this.getList()
    this.getNoticeList()

  },
  methods: {
    //通知公告
    async getNoticeList () {
      let res = await getTopListApi()
      if (res && res.code == 200) {
        this.noticeList = res.data
      }
    },
    //首页头部的数据
    async getList () {
      let res = await getAllTagCountApi({ userType: getUserType(), userId: getUserId() })
      if (res && res.code === 200) {
        this.cards[0].data = res.data[0]
        this.cards[1].data = res.data[1]
        this.cards[2].data = res.data[2]
        this.cards[3].data = res.data[3]
      }
    },
    async myecharts1 () {
      var myChart = this.$echarts.init(document.getElementById('main1'))
// 指定图表的配置项和数据
      var option = {
        title: {
          text: '图书分类统计',
          left:'center'
        },
        tooltip: {},
        legend: {
          data: ['分类'],
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 40,
            color: 'black',
            fontWeight: 'bold'
          },
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: '图书数量：',
            type: 'bar',
            data: [],
          },
        ],
      }
      //动态获取数据
      let res = await categoryCountApi()
      if (res && res.code == 200) {
        option.xAxis.data = res.data.names
        option.series[0].data = res.data.counts
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async myecharts2 () {
      var myChart = this.$echarts.init(document.getElementById('main2'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '热门图书排行榜',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            fontWeight: 'bold',
            color: 'black'
          },
        },
        series: [
          {
            name: '书籍名称：',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: [],
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
          }
        ],
      }
      //动态获取数据
      let res = await getHotBookApi()
      if (res && res.code == 200) {
        option.series[0].data = res.data
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async myecharts3 () {
      var myChart = this.$echarts.init(document.getElementById('main3'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '周图书排行榜',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            fontWeight: 'bold',
            color: 'black'
          },
        },
        series: [
          {
            name: '书籍名称',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
          }
        ]
      }
      //动态获取数据
      let res = await getBookByWeekApi()
      if (res && res.code == 200) {
        option.series[0].data = res.data
      }
      //使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async myecharts4 () {
      var myChart = this.$echarts.init(document.getElementById('main4'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '月图书排行榜',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            fontWeight: 'bold',
            color: 'black'
          },
        },
        series: [
          {
            name: '书籍名称',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
      //动态获取数据
      let res = await getBookByMonthApi()
      if (res && res.code == 200) {
        option.series[0].data = res.data
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="scss" scoped>
.bottom-text {
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  font-weight: 600;
}

.show-header {
  background: #00c0ef;
  color: #fff;
  height: 80px;
  border-radius: 5px;
  position: relative;
}

.show-num {
  font-size: 38px;
  font-weight: 600;
  padding: 5px;
}

.icon {
  width: 60px;
  height: 60px;
  padding-top: 5px;
  padding-right: 10px;
}

.box-card {
  /* width: 30%; */
  margin-bottom: 25px;
}

.clearfix {
  text-align: center;
  font-size: 15px;
}
</style>
